@(mapConv: java.util.Map[String, java.util.Map[String, models.Conversation]])

@import libs.Utils; var currentUserId:String = session.get("userId"); var isFirst = false;

@for((key, subMapConv) <- mapConv) {
	@{ isFirst = true; }
	@if(key.indexOf(currentUserId) > 0){
	<li class="left clearfix">
		<span class="chat-img pull-left">
			<img src="https://i0.wp.com/developer.files.wordpress.com/2013/01/60b40db1e3946a29262eda6c78f33123.jpg?w=40" alt="User Avatar" class="img-circle" />
		</span>
	   @for((datetimeKey, conv) <- subMapConv) {
	   @if(isFirst){
		<div class="chat-body clearfix">
			<div class="header">
				<strong class="primary-font">@conv.getOwnerName()</strong>
				<small class="pull-right text-muted">
					<span class="glyphicon glyphicon-time"></span><span class="time-ago" id="@conv.getDatetime()"> @Utils.getDatetimeString(conv.getDatetime())</span>
				</small>
			</div>
		}
		@{ isFirst = false; }
			<p>@conv.getContent()</p>
		}
		</div>
	</li>
	}else{
	<li class="right clearfix">
		<span class="chat-img pull-right">
			<img src="https://i0.wp.com/developer.files.wordpress.com/2013/01/60b40db1e3946a29262eda6c78f33123.jpg?w=40" alt="User Avatar" class="img-circle" />
		</span>
	   @for((datetimeKey, conv) <- subMapConv) {
	   @if(isFirst){
		<div class="chat-body clearfix">
			<div class="header">
				<small class=" text-muted">
					<span class="glyphicon glyphicon-time"></span><span class="time-ago" id="@conv.getDatetime()"> @Utils.getDatetimeString(conv.getDatetime())</span>
				</small>
				<strong class="pull-right primary-font">@conv.getOwnerName()</strong>
			</div>
		}
		@{ isFirst = false; }
			<p>@conv.getContent()</p>
		}
		</div>
	</li>
	}
}